<template>
  <div id="workDetail">
    <el-table
      ref="singleTable"
      :data="tableData"
      style="width: 60%"
      @selection-change="changeFun"
    >
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column
        label="选择"
        type="selection"
        width="55"
      />
      <el-table-column
        property="name"
        label="字段名称"
        width="120"
      />
      <el-table-column
        property="message"
        label="字段备注"
        width="150"
      />
      <el-table-column
        label="类型"
        width="220"
      >
        <template slot-scope="one">
          <el-select
            v-model="one.row.value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div class="btn">
            <el-button
              type="text"
              size="small"
            >操作</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="验证">
        <template slot-scope="two">
          <div
            v-for="(item,index) in two.row.rule"
            :key="index"
            class="inp"
          >
            <div class="inpName">{{ item.label }}：</div>
            <el-input
              v-model="item.txt"
              placeholder="输入验证规则"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-select
      v-model="values"
      placeholder="请选择"
      @change="typeVal(values)"
    >
      <el-option
        v-for="(item) in arr"
        :key="item.value"
        :label="item.desc"
        :value="item.desc"
      />
    </el-select>

    <el-select
      v-model="value"
      placeholder="请选择"
    >
      <el-option
        v-for="(item,key) in arrs"
        :key="item.value"
        :label="item"
        :value="key"
      />
    </el-select>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      value: '',
      values: '',
      checkBoxData: [],
      tableData: [
        {
          name: 'id',
          message: '上海市普陀区金沙江路 1518 弄',
          value: '',
          rule: []
        },
        {
          name: 'create_by',
          message: '上海市普陀区金沙江路 1517 弄',
          value: '',
          rule: []
        },
        {
          name: 'create_date',
          message: '上海市普陀区金沙江路 1519 弄',
          value: '',
          rule: []
        },
        {
          name: 'update_by',
          message: '上海市普陀区金沙江路 1516 弄',
          value: '',
          rule: []
        }
      ],
      options: [
        {
          value: '0',
          label: '表单'
        },
        {
          value: '1',
          label: '列表'
        }
      ],
      arrs: '',
      arr: ''
    }
  },
  mounted() {
    var that = this
    axios
      .post('http://192.168.1.45:8080/fs/control/relation/vals', {
        pid: 72,
        tableName: 'API_TYPE',
        relationType: 'ENUM'
      })
      .then(function(response) {
        that.arrs = response.data.data
      })
      .catch(function(error) {
        alert(error.response.data.message)
      })

    axios
      .post('http://192.168.1.45:8080/fs/menu', {
        pid: 72
      })
      .then(function(response) {
        that.arr = response.data.data.formControllers
      })
      .catch(function(error) {
        alert(error.response.data.message)
      })
  },
  methods: {
    changeFun(val) {
      this.checkBoxData = val
    },
    typeVal(a) {
      for (var i = 0; i < this.arr.length; i++) {
        if (this.arr[i].desc == a) {
          console.log(this.arr[i].relationView)
        }
      }
    }
  }
}
</script>
  <style scoped>
.el-select {
  width: 150px;
}
.btn {
  margin-left: 10px;
  float: right;
}
.inp {
  float: left;
  margin-right: 10px;
}
.inpName {
  float: left;
  height: 36px;
  line-height: 36px;
}
.el-input {
  width: 150px;
}
.json-editor {
  float: right;
  width: 40%;
}
.el-table {
  float: left;
}
</style>
